---
import Layout from "@layouts/Layout.astro";
import Container from "@components/container.astro";
import Breadcrumb from "@components/breadcrumb.vue";
import _1 from "@assets/encapsulationResources/ES5320.png";
import RangeInput from "@components/rangeInput.vue";
---

<Layout title="About">
  <Container>
    <Breadcrumb client:only />
    <div class="item mb-[24px]">
      <div class="title">查找封装资源</div>
      <div class="mb-[20px]">
        TI 球栅阵列 （BGA） 封装提供不同的配置，例如 nfBGA、uBGA、FCBGA、PGA 和
        jrBGA。BGA
        器件支持多种应用，包括但不限于无线基础设施、移动、便携式电子产品、汽车、航空航天和工业应用。BGA
        封装被称为微型封装中的高引脚密度球栅阵列解决方案，是具有高 I/O
        要求的器件的常用封装选项。
      </div>
      <div class="bb mt-[20px]"></div>
      <div class="mt-[20px] min-h-[914px] relative">
        <div class="title second-title text-left">球栅阵列（BGA）</div>
        <div class="flex absolute left-[274px]">
          <img src={_1.src} alt="" class="w-[105px] h-[60px] mr-[40px]" />
          <div class="text-left text-[14px] w-[240px]">
            球栅阵列（BGA）共有N个封装选项，使用筛选器面板进一步细化搜索
          </div>
        </div>
        <div class="grid grid-cols-4 gap-4 mt-[100px]">
          <div class="...">
            <div class="label">封装系列</div>
            <input type="text" />
          </div>
          <div class="...">
            <div class="label">封装名称</div>
            <input type="text" />
          </div>
          <div class="...">
            <div class="label">引脚数</div>
            <RangeInput />
          </div>
          <div class="...">
            <div class="label">节距（mm）</div>
            <RangeInput />
          </div>
          <div class="...">
            <div class="label">最大高度（mm）</div>
            <RangeInput />
          </div>
          <div class="...">
            <div class="label">长度（mm）</div>
            <RangeInput />
          </div>
          <div class="...">
            <div class="label">宽度（mm）</div>
            <RangeInput />
          </div>
        </div>
        <div class="mt-[34px]">
          <button class="submit-btn">应用</button>
          <button class="ml-[30px] reset-btn">重置表</button>
        </div>
        <table class="w-full mt-[20px]">
          <thead>
              <tr>
                  <th>封装系列</th>
                  <th>封装名称</th>
                  <th>描述</th>
                  <th>引脚数</th>
                  <th>节距（mm）</th>
                  <th>最大高度（mm）</th>
                  <th>长度（mm）</th>
                  <th>宽度（mm）</th>
                  <th>包装图</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                <td>BGA封装</td>
                <td>ZDL系列</td>
                <td>塑料栅格阵列</td>
                <td>305</td>
                <td>1.0</td>
                <td>1.41</td>
                <td>19.0</td>
                <td>19.0</td>
                <td>包装图</td>
              </tr>
</tbody>

      </div>

      <div></div>
    </div>
  </Container>
</Layout>
<style lang="scss" scoped>
  .item {
    box-sizing: border-box;
    padding: 16px 14px;
    border-radius: 8px;
    opacity: 1;
    background: #ffffff;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
    padding-bottom: 28px;
    .submit-btn {
      width: 70px;
      height: 30px;
      border-radius: 2px;
      opacity: 1;
      background: #712c2f;
      color: #fff;
      font-size: 16px;
    }
    .reset-btn{
      color: #78A7DF;
      font-size: 16px;
    }
    .title {
      font-size: 20px;
      color: #3d3d3d;
      font-weight: 500;
    }
    .second-title {
      font-size: 18px;
    }
    .row {
      width: 212px;
      height: 254px;
      .img-box {
        height: 128px;
        width: 238px;
        padding-left: 6px;
        padding-right: 6px;
        box-sizing: border-box;
      }
    }
  }
  .bb {
    border-bottom: 1px solid #d8d8d8;
  }
  input {
    border: 1px solid #999999;
    border-radius: 2px;
    width: 272px;
    height: 22px;
  }
  .label {
    margin-bottom: 10px;
  }
  th{
    background: #712C2F;
    color: #fff;
    height: 50px;
    font-size: 16px;
    text-align: center;
}
td{
  height: 60px;
  line-height: 60px;
  text-align: center;
}
table{
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
}
</style>
